<template>
  <q-page class="q-pa-md" v-loading="loading">
    <div>
      <titleList :titleListData="['通用管理','日志管理']" />
      <div class="search-input-content">
<!--        <div style="display: flex;align-items: center;margin-top: 5px">-->
<!--          <el-icon style="font-size: 25px;margin-right: 5px"><Download /></el-icon>-->
<!--          <span style="font-size: 12px;color: #1D1D1D;font-weight: bold;width: 30px">下载</span>-->
<!--        </div>-->
        <el-input
          placeholder="搜索用户名称"
          v-model.trim="searchName"
          @keyup.enter="filterDataset"
          :suffix-icon="Search"
        >
        </el-input>
      </div>
    </div>
    <el-table
      :header-cell-style="{ background: 'rgb(242,242,242)', color: 'rgb(16,16,16)', fontWeight: 'bold', textAlign: 'center' }"
      :cell-style="{ fontSize: '12px', textAlign: 'center' }"
      :data="tableDate.results"
      :row-class-name="tableClass"
    >
      <el-table-column label="序号"  type="index" width="80"></el-table-column>
      <el-table-column label="操作人" prop="username"></el-table-column>
      <el-table-column label="操作路径" prop="path"></el-table-column>
      <el-table-column label="操作地址" prop="ip_addr"></el-table-column>
      <el-table-column label="操作时间" prop="fetch_time"></el-table-column>
      <el-table-column label="操作结果" prop="desc"></el-table-column>
      <el-table-column label="错误信息" prop="error_msg"></el-table-column>
      <template #empty>
        <div class="noData">暂无数据</div>
      </template>
    </el-table>
    <div class="row" style="justify-content:flex-end;">
      <el-pagination
        background layout="prev, pager, next"
        :total="tableDate.count"
        :current-page="pageData.page"
        :page-size="10"
        @current-change="changePage"
        style="margin-top: 20px;"
        hide-on-single-page="true"/>
    </div>
  </q-page>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import { getDailyInfo } from 'src/api/system';
import { Search } from '@element-plus/icons-vue'
import titleList from 'components/subTitleList.vue';
const loading = ref(false)
const searchName = ref('')
//给列表偶数行添加样式
const tableClass = ({ row, rowIndex }) => {
  if (rowIndex % 2 == 1) {
    return "even-row";
  } else {
    return "";
  }
}

let tableDate = reactive({
  count: 0,
  next: null,
  previous: null,
  results: []
})
const pageData = ref({
  page: 1
})
onMounted(() => {
  dailyInfo();
})
function dailyInfo() {
  loading.value = true;
  let obj = {}
  if (searchName.value != ''){
    obj = {search: searchName.value,page:pageData.value.page}
    obj=Object.assign(obj)
  } else {
    obj = {page:pageData.value.page}
    obj=Object.assign(obj)
  }
  getDailyInfo(obj).then( res => {
    tableDate = res.data
    loading.value = false
  })
}
function filterDataset() {
  pageData.value.page = 1;
  dailyInfo()
}
//分页功能
const changePage = (currentPage: any) => {
  pageData.value.page = currentPage
  let limit = 10;
  let offset = 0;
  currentPage > 1 ? offset = (currentPage-1) * limit : offset = 0;
  dailyInfo()
}

function deleteDailyRecord () {
  console.log('1111');
}
</script>
<style scoped lang="scss">
.search-input-content {
  display: flex;
  align-items: center;
  position: absolute;
  right: 10px;
  top: 18px;
  cursor: pointer
}
</style>
